<template>
  <div id="notice">
    <img :src="imgLink" alt="公告">
    <p class="img_dec">下载图片:点击图片-->长按图片-->保存图片</p>
    <group>
      <div class="policy_dec">
        <h3>代理购卡政策</h3>
        <p>价格:<span class="red">1元一张</span></p>
      </div>
      <x-table :cell-bordered="false" style="background-color:#fff;">
        <thead>
          <tr>
            <th>金额</th>
            <th>房卡</th>
            <th>赠送</th>
            <th>活动加赠</th>
            <th>房卡总数</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="card in givecard" :key="card.money">
            <td>{{card.money}}</td>
            <td>{{card.paycard}}</td>
            <td>{{card.givecard}}</td>
            <td>{{card.bonuscard}}</td>
            <td>{{card.sumcard}}</td>
          </tr>
        </tbody>
      </x-table>
    </group>
  </div>
</template>

<script>
import { XTable, Group } from "vux";
export default {
  data() {
    return {
      imgLink : '',      //图片链接
      givecard: [] //代理购卡档
    };
  },
  created() {
    this.apiService.agent.agentnotice().then(res => {
      this.givecard = res.data.purchasecard;
      this.imgLink = res.data.link
    })
  },
  components: {
    XTable,
    Group
  },
  methods: {}
};
</script>
<style scoped>
.red {
  color: rgb(247, 93, 93);
  margin-left: 0.2rem;
}
#notice img {
  width: 100%;
  vertical-align: middle;
}
.img_dec {
  padding: 0.2rem 0.3rem;
  text-align: center;
  background-color: #fff;
}
.policy_dec {
  padding: 0.3rem;
}
.policy_dec p {
  text-align: right;
  margin-top: 0.2rem;
}
#notice .vux-table th::before {
  border: none;
}
#notice .vux-table td,
#notice .vux-table th {
  width: 20%;
  font-size: 0.26rem;
}
</style>
